<template>
	<div id="user-bus-btn-menu">
		<div class="btn-menu-assist"></div>
		<div id="btn-menu">
			<a @click="toIndex" id="to-index" class="btn-menu-a">
<<<<<<< HEAD
				<img class="btn-menu-icon" :src="img.toIndexAssociationIcon" />
=======
				<!-- <img class="btn-menu-icon" src="https://www.mrobiji.com/images/to-index-association.svg" />
				<span class="btn-menu-a-text">主页</span> -->
				<span class="btn-menu-a-text">个人</span>
>>>>>>> 1.9.0
				<span class="btn-menu-a-text">主页</span>
			</a>
			<a @click="share({type: 'user'})" id="to-share" class="btn-menu-a">
				<img class="btn-menu-icon" :src="img.shareIcon" />
				<span class="btn-menu-a-text">分享</span>
			</a>
			<a v-show="setCardShow === false" @click="createCard" id="create-card" class="to-edit-my-card btn-menu-a">
				<img class="btn-menu-icon" :src="img.createCardGrayIcon" />
				<span class="btn-menu-a-text">创建名片</span>
			</a>
			<a v-show="setCardShow" @click="setCard"  id="set-card"  class="to-edit-my-card btn-menu-a">
				<img class="btn-menu-icon" :src="img.resetGrayIcon" />
				<span class="btn-menu-a-text">设置名片</span>
			</a>
			<a @click="checkCard" id="chack-bs-card" class="btn-menu-a">
				<!-- <img class="btn-menu-icon" :src="img.bsCardGrayIcon" /> -->
				<img class="btn-active-menu-icon" :src="img.qingmingIcon" />
				<span class="btn-menu-a-text">名片卡图</span>
			</a>
			<a @click="clickchecktWechatInfo" id="check-wechat" class="btn-menu-a">
				<img class="btn-menu-icon" :src="img.wechatWhiteIcon" />
				<span class="btn-menu-a-text">微信</span>
			</a>
		</div>

		<!-- 微信信息弹窗 -->
		<div 
		v-show="showWindow === 'wechatInfoWindow' && overlayShow" 
		id="wechat-info" 
		class="center-hint">
			<van-icon @click="hideOverlayShow" class="wechat-info-close-icon" name="cross" />
			<div class="center-hint-content">
				<div id="wechat-no-info">
					<span>微信:</span>
					<span id="wechat-no">{{userWechatInfo.UserWx}}</span>
					<span id="copy-user-wechat-no" 
					v-clipboard:copy="userWechatInfo.UserWx" 
					v-clipboard:success="onSuccCopyWechatNo" 
					v-clipboard:error="onErrorCopyWechatNo">
					{{copyWechatNoText}}</span>
				</div>
				<div id="wechat-remarks">{{userWechatInfo.Description}}</div>
				<div 
				v-if="userWechatInfo.WxScan && typeof userWechatInfo.WxScan === 'string' && userWechatInfo.WxScan.trim().length" 
				class="wechat-qrcode-par">
					<img id="wechat-qrcode" :src="userWechatInfo.WxScan">
					<div class="wechat-qrcode-explain">长按识别加微信好友</div> 
				</div>
			</div>
		</div>

		<!-- 未填写业务名片弹窗 -->
		<div 
		v-show="showWindow === 'needSetBusinessHint' && overlayShow" 
		id="need-set-business-hint" 
		class="hint-one">
			<div class="hint-one-text-div">
				<div>{{needSetBusinessHintText}}</div>
			</div>
			<div class="hint-one-btn-div">
				<a @click="hideOverlayShow" class="hint-one-btn hint-one-btn-close">关闭</a>
				<a @click="toBus" id="to-set-business" class="hint-one-btn hint-one-btn-sure">创建业务名片</a>
			</div>
		</div>

		<!-- 积分支付，确定查看微信弹窗 -->
		<div 
		v-show="showWindow === 'needIntegralPayHint' && overlayShow"
		id="need-integral-pay-hint" 
		class="hint-one">
			<div class="hint-one-text-div">
				<div>当天免费查看次数已用完,继续查看需支付<span id="need-integral-pay-count">{{userIndexInfo.viewFreeWxPay || 0}}</span>积分</div>
			</div>
			<div class="hint-one-btn-div">
				<a @click="hideOverlayShow" class="hint-one-btn hint-one-btn-close">取消</a>
				<a @click="integralPayBrowseWechat" id="sure-browse-wechat" class="hint-one-btn hint-one-btn-sure">确定查看</a>
			</div>
		</div>

		<!-- 没有设置支付密码弹窗 -->
		<div 
		id="no-password-set" 
		class="pop-up-association-small-window"
		v-show="showWindow === 'noPasswordSet' && overlayShow"
		>
			<div class="pop-up-association-small-window-explain">请设置支付密码！</div>
			<div class="pop-up-association-small-window-btn-div">
				<a @click="hideOverlayShow" id="close-no-password-set" class="pop-up-association-small-window-btn color999">取消</a>
				<a @click="toSetPayPassword" class="enter-safety pop-up-association-small-window-btn">设置支付密码</a>
			</div>
		</div>
		<card ref="card" :userInfoData="userInfoData" />
        <show-user-wechat-info ref="showUserWechatInfo" :userId="userIndexInfo.id"/>
        <van-overlay :show="overlayShow" @click="hideOverlayShow" duration="0" />
	</div>
</template>

<script>
// UI组件
import { Overlay, Icon } from "vant"

// 自定义方法
import { toIndex, enterUserIndex } from '_projectFn/page'
import { isWechatBroser } from "_commonFn/browser"
import { failTextVantToa, loadingVantToa, clearVantToa } from '_projectFn/prompt'
import { customShare } from '_commonFn/share'
import { isLogined, getUserIndex, commonRequestData, getPayConfig } from '_network/request'
import { isLoginChose } from '_projectFn/login'
import { enterUserSet, enterUserSetPayPassword } from '_projectFn/page'
<<<<<<< HEAD
import { getCookie } from '_commonFn/cookie.js'
import { getProImg } from "_projectFn/images"
=======
import { getCookie } from '_commonFn/cookie'
import { userNameManagementChange, getText, } from '_commonFn/string'

>>>>>>> 1.9.0

// 本地图片
import toIndexAssociation from '_assets/img/to-index-association.svg'
import share from '_assets/img/share-icon.svg'
import createCardGray from '_assets/img/create-card-gray-icon.svg'
import resetGray from '_assets/img/reset-gray-icon.svg'
import bsCardGray from '_assets/img/bs-card-gray-icon.svg'
import wechatWhite from '_assets/img/wechat-icon-white.svg'
import qingming from '_assets/img/qingming-act-icon.png'

// 自定义组件
import Card from "_components/project/UserBus/Card"
import ShowUserWechatInfo from "_components/project/common/ShowUserWechatInfo"

// 插件
import VueClipboard from 'vue-clipboard2'

// Vue全家桶
import Vue from 'vue'

VueClipboard.config.autoSetContainer = true
Vue.use(Overlay).use(VueClipboard)

export default {
	name: 'BtnMenu',
	props: {
		apiData: {
			type: Object,
			default: {}
		},
		userIndexInfo: {
			type: Object,
			default: {}
		},
	},
	data() {
		return {
			shareInfo: {
				userShareCount: 0
			},
			isWechatBro: this.$store.state.wechat.isWechatBro,
			checkWechatInfo: {
				isChecktWechatInfo: 0
			},
			showWindow: '', // 显示的弹窗
			overlayShow: false, // 是否显示遮罩层
			userWechatInfo: {},
			copyWechatNoText: '复制',
			needSetBusinessHintText: '请1分钟设置[业务名片],即可查看微信！', // 未设置业务名片文字提示
			img: {
				toIndexAssociationIcon: getProImg('to-index-association.svg', toIndexAssociation),
				shareIcon: getProImg('_assets/img/share-icon.svg', share),
				createCardGrayIcon: getProImg('_assets/img/create-card-gray-icon.svg', createCardGray),
				resetGrayIcon: getProImg('_assets/img/reset-gray-icon.svg', resetGray),
				bsCardGrayIcon: getProImg('_assets/img/bs-card-gray-icon.svg', bsCardGray),
				wechatWhiteIcon: getProImg('_assets/img/wechat-icon-white.svg', wechatWhite),
				qingmingIcon: getProImg('_assets/img/qingming-act-icon.png', qingming),
			},
		}
	},
	methods: {
		// 点击进入主页
		toIndex() {
			// toIndex({})
			enterUserIndex({
				userId: this.$route.query.userId
			})
		},
		// 点击分享
		share({data = this.dataAll, type = 'default'}) {
			const that = this
			if (data && typeof data === 'object' && Object.keys(data).length > 0 && that.isWechatBro) {
				if (type === 'user') {
					console.log('点击分享')
					if (isLoginChose()) {
						if (that.shareInfo.userShareCount > 0) {
							that.showUserShare()
							return
						} else {
							that.toWechatShare(data, type)
							that.showUserShare()
						}
					}
				} else {
					console.log('首次进入分享')
					that.toWechatShare(data, type)
					// that.showUserShare()
				}
			} else if (type === 'user' && that.isWechatBro === false) {
				failTextVantToa('请在微信客户端打开')
			}
		},
		// 微信分享
		toWechatShare(data, type, callback) {
			// console.log('data', data)
			const that = this
			const link = type === 'user' ? `${location.href.split('#')[0]}&shareUser=MyBusiness_${getCookie('UserId')}_${data.id}` : location.href
			const title = `${data.name}的工品名片`
			const dynamic = `${userNameManagementChange({name: getText(data.supply), count: 35})}`
			// console.log('signature', signature)
			// console.log('dynamic', dynamic)
			customShare({
				shareData: {
					shareDynamic: {
						title: `${title}${dynamic ? ` | ${dynamic}` : ''}`,
						link,
						imgUrl: `https://www.mrobiji.com/images/user-card-share.jpg`,
						desc: `${dynamic}`,
					},
					shareFriend: {
						title,
						link,
						imgUrl: `https://www.mrobiji.com/images/user-card-share.jpg`,
						desc: `${dynamic}`,
					}
				},
				fn() {
					if (type === 'user') {
						that.shareInfo.userShareCount += 1
					}
				}
			})
		},
		// 点击创建名片
		createCard() {
			this.setCard()
		},
		// 点击设置名片
		setCard() {
			if (process.env.IS_LOCAL) {
				console.log('未开发设置页面名片页面')
				return
			}
			isLogined({
				callback() {
					enterUserSet('business')
				}
			})
		},
		// 点击查看名片
		checkCard() {
			if (isLoginChose()) {
				// failTextVantToa('正在开发')
				this.$refs.card.clickCheckCard()
			}
		},
		// 点击查看微信
		clickchecktWechatInfo() {
			if (isLoginChose()) {
				// if (this.checkWechatInfo.isChecktWechatInfo === 0) { // 如果没有查看过该微信
				// 	this.checktWechatInfo()
				// } else {
				// 	this.showUserWechatInfo() // 显示查看微信弹窗
				// }
                this.$refs.showUserWechatInfo.checktWechatInfo()
			}
		},
		// 查看微信，执行判断
		checktWechatInfo() {
			const that = this
			that.$emit('getUserIndexDataPar', (data = this.userIndexInfo) => {
				console.log('data', data)
				if (data.id == getCookie('UserId')) { // 自己的微信
                    that.freeBrowseWechat() // 免费查看微信
                } else {
                    if (data) {
                        if (data.isPayViewWx) {
                            that.freeBrowseWechat() // 免费查看微信
                        } else {
                            if (data.isViewWechat == 0) { // 未受限
                                if (data.isUserBusiness) { // 已填写业务名片
                                    if (data.maxViewFreeWx > data.viewFreeWx) { // 在免费查看次数内
                                        that.freeBrowseWechat() // 免费查看微信
									} else { // 显示确定是否积分支付
										that.showNeedIntegralPay()
                                    }
                                } else { // 显示未设置业务名片
                                    that.showNotSetBusInfo('请1分钟设置[业务名片],即可查看微信！')
                                }
                            } else { // 显示已受限
                                failTextVantToa(`您当前已受限！受限期间不可查看微信！`)
                            }
                        }
                    }
                }
			})
		},
		freeBrowseWechat() { // 免费、免密查看微信
			const that = this
            loadingVantToa({})
            commonRequestData({
                apiName: 'UserIndex_MyWeChat',
                requestData: {
                    UserId: that.dataAll.id
                }
            })
            .then(res => {
                console.log('免密支付查看微信 res：', res)
                if (res.errcode == 0) {
					clearVantToa()
					that.userWechatInfo = Object.assign({}, res.data)
					this.checkWechatInfo.isChecktWechatInfo = 1
                    that.showUserWechatInfo(res.data) // 显示微信信息
                } else {
                    if (res.errcode == 1002) {
						clearVantToa()
                        that.showNotSetBusInfo('请1分钟设置[业务名片],即可查看微信！')
                    } else {
                        failTextVantToa(res.message)
                    }
                }
            }, res => {
                console.log('fail: res', res)
                if (res.errcode != 2000) {
                    failTextVantToa('服务器正在修整')
                }
            })
            .catch(res => {
                console.log('catch：res', res)
                failTextVantToa('服务器正在修整，请稍后')
            })
		},
		// 显示需要积分支付弹窗
		showNeedIntegralPay() {
			this.showWindow = 'needIntegralPayHint'
			this.overlayShow = true
		},
		// 显示查看微信弹窗
		showUserWechatInfo() {
			this.showWindow = 'wechatInfoWindow'
			this.overlayShow = true
		},
		// 显示未设置业务名片
		showNotSetBusInfo(text) {
			// console.log('显示未设置业务名片')
			this.needSetBusinessHintText = text
			this.showWindow = 'needSetBusinessHint'
			this.overlayShow = true
		},
		// 显示分享提示
		showUserShare() {
			this.$emit('showUserSharePar')
		},
		// 复制微信号成功
		onSuccCopyWechatNo() {
			this.copyWechatNoText = '复制成功'
		},
		// 复制微信号失败
		onErrorCopyWechatNo() {
			this.copyWechatNoText = '复制失败'
		},
		// 隐藏遮罩层
		hideOverlayShow() {
			this.overlayShow = false
			this.showWindow = ''
		},
		// 进入设置业务名片页面
		toBus() {
			if (isLoginChose()) {
				enterUserSet('business')
			}
		},
		// 点击确定积分支付查看微信
		integralPayBrowseWechat() {
			if (isLoginChose()) {
				const that = this
				getPayConfig({
					callback(data) {
						console.log('data', data)
						that.hideOverlayShow()
						if (that.userIndexInfo.viewFreeWxPay <= data.Freesecret) { // 如果在免密支付范围
							that.freeBrowseWechat() // 执行免密支付
						} else {
							if (data.IsPayPwd) { // 如果设置了支付密码
								// 隐藏弹窗
								that.hideOverlayShow()
								// 显示密码支付
								that.$router.push({
									path: 'Pay',
									name: 'Pay',
									query: {
										type: 'UserBusBrowseWechat',
										page: 'UserBus',
										no1: that.dataAll.id
									}
								})
							} else {
								that.showNoSetPwd()
							}
						}
					}
				})
			}
		},
		// 显示没有设置支付密码
		showNoSetPwd() {
			this.showWindow = 'noPasswordSet'
			this.overlayShow = true
		},
		// 进入设置支付密码页面
		toSetPayPassword() {
			enterUserSetPayPassword()
		},
		// 支付成功
		paySuccessWechatInfo(data) {
			this.userWechatInfo = Object.assign({}, data)
			this.checkWechatInfo.isChecktWechatInfo = 1
			this.showUserWechatInfo(data) // 显示微信信息
		}
	},
	computed: {
		dataAll() {
			return this.apiData
		},
		setCardShow() {
			// console.log('this.dataAll', this.dataAll)
			if (this.dataAll.id) {
				if (this.dataAll.id == getCookie('UserId')) {
					return true
				}
			}
			return false
		},
		userInfoData() {
			return this.userIndexInfo
		}
	},
	activated() {
		this.checkWechatInfo.isChecktWechatInfo = 0
	},
	// 组件创建完成时
	mounted() {
		// console.log('store.state', store.state)
	},
	components: {
		Card,
		ShowUserWechatInfo,
	}
}
</script>

<style lang="scss" scoped>

	.btn-menu-assist {
		height: 50px;
		background: #eeeeee;
	}

	#btn-menu {
		height: 50px;
		position: fixed;
		width: 100%;
		bottom: 0;
		display: -webkit-flex;
		display: flex;
		text-align: center;
		align-items: center;
		background: white;
		box-shadow: 0px -1.5px 1px #f3f3f3;

		.btn-menu-a {
			display: -webkit-flex;
			display: flex;
			flex-direction: column;
			height: 100%;
			align-items: center;
			justify-content: center;
			color: #999999;

			.btn-menu-icon {
				width: 15px;
				height: 15px;
			}

			.btn-active-menu-icon {
				width: 30px;
				// margin-bottom: 2px;
			}

			.btn-menu-a-text {
				line-height: 18px;
				width: 100%;
				text-align: center;
			}

			&:not(:last-child) {
				width: 18.75%;
				min-width: 58px;

				.btn-menu-icon {
					margin-top: 5px;
				}

				&:not(:nth-last-child(2)) {
					position: relative;

					&::after {
						content: "";
						width: 1px;
						height: 50%;
						position: absolute;
						top: 25%;
						right: -0.5px;
						background: #d6d6d6;
					}
				}
			}
		}

		#check-wechat {
			background: #00c800;
			color: white;
			font-size: 16px;
			flex-direction: row;
			width: 25%;

			.btn-menu-a-text {
				width: 34px;
			}

			.btn-menu-icon {
				width: 20px;
				height: 20px;
				margin-right: 5px;
			}
		}
	}

	// 通用弹窗1
	.hint-one {
		width: 290px;
		height: 170px;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -145px;
		margin-top: -85px;
		z-index: 2;
		background: white;
		border-radius: 5px;
		overflow: hidden;
	
		.hint-one-text-div {
			height: 130px;
			width: 100%;
			display: -webkit-flex;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #eeeeee;
			padding: 15px;
			flex-direction: column;
		}
		
		.hint-one-btn-div {
			height: 40px;
			width: 100%;
			display: -webkit-flex;
			display: flex;
		
			.hint-one-btn {
				display: -webkit-flex;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
			
			.hint-one-btn-close {
				color: #999999;
				width: 90px;
			}
			
			.hint-one-btn-sure {
				background: #0077bf;
				color: white;
				width: 200px;
			}
		}
	}
	// 通用弹窗1结束

	// 通用上下左右居中弹窗1
	.center-hint {
		width: 290px;
		min-height: 100px;
		background: white;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -145px;
		z-index: 2;
		border-radius: 5px;
		transform: translateY(-50%);
		
		.center-hint-content {
			min-height: 70px;
			display: -webkit-flex;
			display: -moz-flex;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px;
			border-bottom: 1px solid #eeeeee;
		}

		.center-hint-btns {
			height: 30px;
			line-height: 30px;
			display: -webkit-flex;
			display: -moz-flex;
			display: flex;
			align-items: center;

			.center-hint-btn {
				color: #999999;
			}

			.center-hint-fill {
				width: 100%;
				height: 100%;
				display: -webkit-flex;
				display: -moz-flex;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	// 通用上下左右居中弹窗1结束

	// 微信信息弹窗
	#wechat-info {
		width: 300px;
		min-height: 80px;
		overflow: hidden;

		.wechat-info-close-icon {
			position: absolute;
			top: 4px;
			right: 4px;
			color: #999999;
		}
	
		.center-hint-content {
			background: white;
			border-bottom: 0px;
		}
		
		.center-hint-btns {
			height: 45px;
			font-size: 14px;
		}
		
		.center-hint-btn {
			color: #999999 !important;
		}
		
		.center-hint-btn:active {
			background: #015488;
		}
		
		#wechat-no-info {
			width: 100%;
			line-height: 22px;
			font-size: 16px;

			#wechat-no {
				font-weight: bold;
			}

			#copy-user-wechat-no {
				margin-left: 10px;
				font-size: 14px;
				cursor: pointer;
				color: #0077bf;
			}
		}
		
		#wechat-remarks {
			color: #999999;
			width: 100%;
			line-height: 22px;
		}

		.wechat-qrcode-par {
			color: #999999;
			margin-bottom: 15px;
			margin-top: 6px;
			text-align: center;
			font-size: 12px;
		
			#wechat-qrcode {
				width: 240px;
				margin-top: 10px;
			}

			.wechat-qrcode-explain {
				margin-top: 7px;
			}
		}
	}

	// 通用弹窗,小
	.pop-up-association-small-window {
		width: 250px;
		height: 150px;
		text-align: center;
		background: white;
		border-radius: 5px;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -75px;
		margin-left: -125px;
		z-index: 2;

		.pop-up-association-small-window-explain {
			height: 110px;
			width: 100%;
		}

		.pop-up-association-small-window-btn-div {
			display: -webkit-flex;
			display: flex;
			height: 40px;
			align-items: center;
			width: 100%;
			border-top: 1px solid #eeeeeeee;

			.pop-up-association-small-window-btn {
				width: 50%;
				height: 100%;
				display: -webkit-flex;
				display: flex;
				justify-content: center;
				align-items: center;

				&:first-child {
					border-right: 1px solid #eeeeee;
				}
			}
		}
	}
	
	// 没有设置密码弹窗
	#no-password-set {
		.pop-up-association-small-window-explain {
			display: -webkit-flex;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>